<script setup lang="ts">
import {
  ref,
  computed,
  type Ref,
  watch,
  onUpdated,
  onMounted,
  reactive,
  provide,
} from "vue";
import VueIcon from "./components/VueIcon/VueIcon.vue";
import ProductItem from "./components/ProductItem/ProductItem.vue";
import FilterVue from "./components/filters/FilterVue.vue";
import { Theme } from "./keys/index.ts";

interface Product {
  id: number;
  title: string;
  price: number;
  inStock: boolean;
  imageUrl: string;
}

const productList = ref<Product[]>([
  {
    id: 1,
    title: "纯棉 T 恤",
    price: 66,
    inStock: true,
    imageUrl: "/images/t-shirt1.jpg",
  },
  {
    id: 2,
    title: "夹克外套",
    price: 128,
    inStock: true,
    imageUrl: "/images/jacket1.jpg",
  },
  {
    id: 3,
    title: "水洗牛仔裤",
    price: 99,
    inStock: false,
    imageUrl: "/images/jeans1.jpg",
  },
  {
    id: 4,
    title: "印花 T恤",
    price: 72,
    inStock: true,
    imageUrl: "/images/t-shirt2.jpg",
  },
]);

//filter

type sortAndFilterValue = "asc" | "desc" | "";

interface sortAndFilterType {
  price: sortAndFilterValue;
  name: sortAndFilterValue;
  inStock: null | boolean;
}

const sortAndFilter: sortAndFilterType = reactive({
  price: "",
  name: "",
  inStock: null,
});

const handlePrice = () => {
  // console.log("price");
  if (sortAndFilter.price === "asc") {
    sortAndFilter.price = "desc";
  } else {
    sortAndFilter.price = "asc";
  }
  sortAndFilter.name = "";
};

const handleName = () => {
  // console.log("name");
  if (sortAndFilter.name === "asc") {
    sortAndFilter.name = "desc";
  } else {
    sortAndFilter.name = "asc";
  }
  sortAndFilter.price = "";
};

const handleInstock = (val: null | boolean) => {
  console.log("inStock");
  sortAndFilter.inStock = val;
};

watch(
  sortAndFilter,
  (newVal) => {
    console.log(newVal);
  },
  {
    immediate: true,
  }
);

const productFilteredList = computed(() => {
  return productList.value
    .filter((item) => {
      return sortAndFilter.inStock === null
        ? true
        : item.inStock === sortAndFilter.inStock;
      // if (sortAndFilter.inStock === null) {
      //   return true;
      // } else if (sortAndFilter.inStock === false) {
      //   return item.inStock === false;
      // } else if (sortAndFilter.inStock === true) {
      //   return item.inStock === true;
      // }
    })
    .sort((a, b) => {
      if (sortAndFilter.name) {
        return sortAndFilter.name === "asc"
          ? a.title.localeCompare(b.title)
          : b.title.localeCompare(a.title);
      }
      if (sortAndFilter.price) {
        return sortAndFilter.price === "asc"
          ? a.price - b.price
          : b.price - a.price;
      }
      return 0;
    });
});

// const filterValue = ref("none");
// const stockValue = ref("");
// const onFilterStock = (val) => {
//   stockValue.value = val;
// };

// const productFilteredList = computed(() => {
//   return productList.value.filter((item) => {
//     if (stockValue.value === "") {
//       return item;
//     } else if (stockValue.value === "true") {
//       return item.inStock;
//     } else {
//       return item.inStock === false;
//     }
//   }).sort((a,b)=>{
//      if(filterValue.value === 'price'){
//       return a.price - b
//      }
//   });
// });

// const productFilteredList = ref([]);

// watch(
//   filterValue,
//   (newVal) => {
//     if (newVal === "price") {
//       console.log("price");
//       productFilteredList.value = productList.value.sort((a, b) => {
//         return a.price - b.price;
//       });
//     } else if (newVal === "name") {
//       console.log("name");
//       productFilteredList.value = productList.value.sort((a, b) => {
//         return a.title.localeCompare(b.title);
//       });
//     } else {
//       productFilteredList.value = productList.value;
//     }
//   },
//   { immediate: true }
// );
// onMounted(() => {
//   console.log(productList.value);
//   console.log(productFilteredList.value);
// });
// onUpdated(() => {
//   console.log(productFilteredList.value);
// });

//incjection
provide(Theme, "iamBlack");
provide("iamKey", "iamWhite");

const ActionCom = ref<null | InstanceType<typeof ProductItem>>(null);
</script>

<template>
  <div class="main">
    <p class="mainTitle"><VueIcon width="35" height="35" />花月夜的店铺</p>
    <FilterVue
      @filterByPrice="handlePrice"
      @filterByName="handleName"
      @filterByStock="handleInstock"
    ></FilterVue>
    <div class="productList">
      <ProductItem
        v-for="item in productFilteredList"
        :key="item.id"
        v-bind="item"
      />
    </div>
  </div>
</template>

<style scoped>
.main {
  display: grid;
  place-items: center;
}

.mainTitle {
  margin: 0 auto;
  margin-bottom: 24px;

  font-size: 30px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.productList {
  margin: 20px 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* background-color: pink; */
  /* padding: 25px; */
  /* border-radius: 25px; */
}
</style>
